<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video 实例代码</title>
    <style>
        body {
            text-align: center;
        }

        .container {
            position: relative;
        }

        .ctrl {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -60px;
            margin-left: -60px;
        }

        .ctrl img {
            width: 120px;
            height: 120px;
        }

        .ad {
            width: 200px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -50px;
        }
    </style>
</head>
<body>
<div class="container">
    <!--视频-->
    <video id="v3" src="src/video.mp4" loop controls muted>
        您的浏览器版本太低，请更新浏览器
    </video>
    <!--广告-->
    <img src="src/ad.jpg" alt="" class="ad">
    <!--按钮-->
    <a href="#" class="ctrl">
        <img src="src/play.jpg" alt=""/>
    </a>
</div>
<script>
    // 功能一： 鼠标移入显示按钮，鼠标移除隐藏
    // 1. 获取最外层的元素
    // 2. 获取按钮
    let container = document.querySelector(".container");
    let ctrl = document.querySelector(".ctrl");
    // 3. 鼠标移入 div 显示 a
    container.onmouseenter = function () {
        ctrl.style.display = "block";
    };
    // 4. 鼠标移出 div 隐藏 a
    container.onmouseleave = function () {
        ctrl.style.display = "none";
    };

    // 功能二：点击播放按钮，播放视频
    let v3 = document.getElementById("v3");
    // 功能三： 切换图片
    // 如果状态 暂停 =》 播放
    // 如果状态 播放 =》 暂停
    // 练习：切图片，广告是否展示
    // 1. 获取按钮图片
    let ctrlImg = document.querySelector(".ctrl img");
    ctrl.onclick = function (e) {
        e.preventDefault();
        if (v3.paused == true) {
            v3.play();
            ctrlImg.src = "src/paused.jpg";
        } else {
            v3.pause();
            ctrlImg.src = "src/play.jpg";
        }
    };

    // 功能： 播放隐藏广告，暂停显示广告
    let ad = document.querySelector(".ad");
    v3.onplay = function () {
        ad.style.display = "none";
    };
    v3.onpause = function () {
        ad.style.display = "block";
    };

</script>
</body>
</html>